<template>
    <a-modal v-model="addressModelVisible" title="收货地址" ok-text="确认" cancel-text="取消"
             @ok="submitAddressFom('addressForm')" @cancel="closeModel">
        <a-form-model
                hide-required-mark
                ref="addressForm"
                :model="addressForm"
                :rules="addressFormRules"
                :wrapperCol="wrapperCol"
        >

            <a-form-model-item hasFeedback class="form-item" label="收货人" prop="name">
                <a-input v-model="addressForm.name" style="width: 220px"/>
            </a-form-model-item>
            <a-form-model-item hasFeedback class="form-item" label="省/市/区" prop="tempArea">
                <a-cascader
                        :field-names="{ label: 'name', value: 'id',children:'children'}"
                        :options="regionData"
                        :show-search="{ filter }"
                        placeholder="Please select"
                        v-model="addressForm.tempArea"
                        @change="onChange"
                />
            </a-form-model-item>
            <a-form-model-item hasFeedback class="form-item" label="详细地址" prop="address">
                <a-textarea v-model="addressForm.address"></a-textarea>
            </a-form-model-item>
            <a-form-model-item hasFeedback class="form-item" label="手机号" prop="mobile">
                <a-input v-model="addressForm.mobile" style="width: 220px"></a-input>
            </a-form-model-item>
            <a-form-model-item class="form-item" label="邮政编码" prop="zipCode">
                <a-input v-model="addressForm.zipCode" style="width: 160px"></a-input>
            </a-form-model-item>
            <a-form-model-item class="form-item" label="地址标签" prop="label">
                <a-input v-model="addressForm.label" style="width: 160px"></a-input>
                <!--TODO 点击后不及时显-->
              <!--  <div>
                    <a-tag v-for="label in defaultLabels" color="#f50" style="cursor: pointer"
                           @click="setLabel(label)">{{label}}
                    </a-tag>
                </div>-->
            </a-form-model-item>
            <a-form-model-item class="form-item" label="是否默认地址" prop="isDefault">

                <a-switch v-model="addressForm.isDefault"></a-switch>
            </a-form-model-item>

        </a-form-model>
    </a-modal>
</template>

<script>
    import regionApi from "../../../api/info/regionApi";

    import addressApi from "../../../api/info/addressApi";

    export default {
        name: "AddressForm",
        props: {
            addressModelVisible: Boolean,
            addressForm: Object,
        },
        inject: ["reload"],

        data() {
            return {
                wrapperCol: {
                    span: 24,
                },

                addressFormRules: {
                    name: [
                        {required: true, message: '请填写收货人', trigger: 'blur'}
                    ],
                    tempArea: [
                        {required: true, message: '请选择地区', trigger: 'blur'}
                    ],
                    address: [
                        {required: true, message: '请填写详细地址', trigger: 'blur'}
                    ],
                    mobile: [
                        {required: true, message: '请填写手机号', trigger: 'blur'}
                    ]
                },
                defaultLabels: ["家里", "学校", "公司"],
                regionData: []
            }
        },
        created() {
            this.loadRegion();
        },
        methods: {

            loadRegion() {
                regionApi.tree().then(resp => {
                    if (resp.data.flag) {
                        this.regionData = resp.data.data
                    }
                })
            },
            submitAddressFom(formName) {
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        console.log(this.addressForm)
                        if (this.addressForm.id) {
                            addressApi.update(this.addressForm).then(resp => {
                                if (resp.data.flag) {
                                    this.reload()
                                }
                            })
                        } else {
                            addressApi.add(this.addressForm).then(resp => {
                                if (resp.data.flag) {
                                    this.reload()
                                }
                            })
                        }


                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            onChange(value, selectedOptions) {
                let areaIds = {
                    province: value[0],
                    city: value[1],
                    area: value[2]
                }
                this.$emit("modifyAreas", areaIds)

            },
            filter(inputValue, path) {
                return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
            },
            closeModel() {
                console.log("close")
                this.$emit("closeForm")
            },
            setLabel(label) {
                this.$emit("setLabel", label)

            }
        }
    }
</script>

<style scoped>

    .form-item {
        margin: 0;
        padding: 0;
    }

</style>